<template>
  <div>
    <a-modal
      :visible="isShow"
      title="Basic Modal"
      @ok="handleOk"
      @cancel="closeAdd"
    >
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 6 }"
        autocomplete="off"
        ref="formRef"
      >
        <a-form-item
          label="姓名"
          name="username"
          :rules="[{ required: true, message: '必填' }]"
        >
          <a-input v-model:value="formState.username" />
        </a-form-item>
        <a-form-item
          label="手机号"
          name="mobile"
          :rules="[{ required: true, message: '必填' }]"
        >
          <a-input v-model:value="formState.mobile" />
        </a-form-item>
        <a-form-item
          label="入职时间"
          name="timeOfEntry"
          :rules="[{ required: true, message: '必填' }]"
        >
          {{ formState.timeOfEntry }}
          <a-date-picker v-model:value="formState.timeOfEntry" />
        </a-form-item>
        <a-form-item
          label="聘用形式"
          name="formOfEmployment"
          :rules="[{ required: true, message: '必填' }]"
        >
          {{ formState.formOfEmployment }}
          <a-select
            ref="select"
            v-model:value="formState.formOfEmployment"
            placeholder="请选择聘用形式"
            style="width: 240px"
          >
            <a-select-option :value="0">正式</a-select-option>
            <a-select-option :value="1">非正式</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="工号"
          name="workNumber"
          :rules="[{ required: true, message: '必填' }]"
        >
          <a-input v-model:value="formState.workNumber" />
        </a-form-item>
        <a-form-item
          label="组织名称"
          name="departmentName"
          :rules="[{ required: true, message: '必填' }]"
        >
          <div v-clickOut="closeTree">
            {{ showTree }}
            <a-input
              readOnly
              v-model:value="formState.departmentName"
              placeholder="请输入组织名称"
              @focus="getData"
            />
            <a-tree
              v-if="showTree"
              :tree-data="departmentNameData"
              :fieldNames="fieldNames"
              @select="clickTree"
            ></a-tree>
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { FormInstance } from 'ant-design-vue'
import { companyDepartment } from '@/api/departments'
import { changeData } from '@/utils/changeTreeData'
import { AntTreeNodeSelectedEvent, TreeProps } from 'ant-design-vue/es/tree'
export default defineComponent({
  name: 'addCom',
  props: {
    isShow: {
      type: Boolean,
      required: true
    }
  },
  setup(props, { emit }) {
    const formRef = ref<FormInstance>()
    const departmentNameData = ref([]) as any
    const fieldNames: TreeProps['fieldNames'] = {
      children: 'children',
      title: 'name',
      key: 'id'
    }
    let showTree = ref<boolean>(false)
    const formState = ref({
      username: '', //非必须		姓名
      mobile: '', //非必须		手机号
      formOfEmployment: undefined, //非必须		聘用形式
      workNumber: '', //非必须		工号
      departmentName: '', //非必须		组织名称
      timeOfEntry: '', //非必须		入职时间
      correctionTime: '' //非必须		转正时间
    })
    // 结论: 只有在setup语法糖才可以使用defineProps、defineEmit,在setup函数无法使用
    //       在setup函数里面,和Vue2一样props即可,与setup函数同级声明props,在模板可以直接使用
    //       在setup函数想要使用声明好的props属性,需要作为参数(props)传进来才行
    //       emit的话,参数传进来,直接使用即可emit('子组件标签事件名',参数1...)
    // const { isShow } = defineProps<{
    //   isShow: Boolean
    // }>()
    const handleOk = () => {
      console.log(formRef.value)
      formRef.value
        ?.validateFields()
        .then((values) => {
          console.log(values)
          emit('closeAdd', false)
        })
        .catch()
    }
    function closeAdd() {
      emit('closeAdd', false)
    }
    async function getData() {
      if (departmentNameData.value.length === 0) {
        const res = await companyDepartment()
        departmentNameData.value = changeData(res.data.depts, '')
      }
      showTree.value = true
    }
    function clickTree(selectedKeys: string, e: AntTreeNodeSelectedEvent) {
      formState.value.departmentName = e.node?.dataRef?.name
      showTree.value = false
    }
    function closeTree() {
      showTree.value = false
    }
    return {
      handleOk,
      closeAdd,
      formState,
      formRef,
      getData,
      departmentNameData,
      fieldNames,
      clickTree,
      showTree,
      closeTree
    }
  }
})
</script>
<!-- <script lang="ts" setup>
const { isShow } = defineProps<{
  isShow: Boolean
}>()
const emit = defineEmits<{
  (e: 'closeAdd', show: Boolean): void
}>()
const handleOk = (e: MouseEvent) => {
  console.log(e)
  emit('closeAdd', false)
}
function closeAdd () {
  emit('closeAdd', false)
}
</script> -->
